<template>
  <div>
    <con-title :topTitle="topTitle" />

    <el-card class="box-card">
      <span class="demonstration">月份选择： </span>
      <el-date-picker type="month" placeholder="选择月"> </el-date-picker>
      <!-- 列表 -->
      <el-table :data="FeeusageList">
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column prop="id" label="充值id"> </el-table-column>

        <el-table-column label="日期">
          <template slot-scope="scope">
            {{ scope.row.cTime | Btime }}
          </template>
        </el-table-column>

        <el-table-column prop="amount" label="充值金额"> </el-table-column>

        <el-table-column prop="desc" label="备注"> </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="goPage">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="query.currPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="query.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import ConTitle from "@/components/ConTitle.vue";
import { $usageList } from "@/api";
export default {
  components: { ConTitle },
  name: "FeeUage",
  data() {
    return {
      topTitle: {
        type: "计费", //type如果有内容就会显示上一级
        text: "使用记录",
        msg: "展示——————————————————————————————————",
      },
      total: 0, //总条数
      query: {
        currPage: 1, //页码
        pageSize: 10, //当前页有多少条数据
        eui: "",
        online: "",
        agreement: "all",
        date: [],
      },
      FeeusageList: [],
    };
  },
  mounted() {
    this.getusageList();
  },
  methods: {
    getusageList() {
      $usageList(this.query).then((res) => {
        console.log(res);
        this.FeeusageList = res.data.data;
        this.total = res.data.total;
      });
    },
    //当页面上显示的数据条数发生变化时会触发这个函数
    handleSizeChange(count) {
      console.log("页面的条数发生变化了", count);
      //将页面显示条数赋值给 pageSize
      this.query.pageSize = count;
      this.query.currPage = 1;
      //重新获取数据
      this.getusageList();
    },
    //翻页会触发的函数
    handleCurrentChange(page) {
      console.log("翻页了", page);
      // 修改当前页的页码
      this.query.currPage = page;
      //重新获取数据
      this.getusageList();
    },
  },
  filters: {
    Btime(val) {
      let d = new Date(+val);
      return (
        d.getFullYear() + "年" + (d.getMonth() + 1) + "月" + d.getDate() + "日"
      );
    },
  },
};
</script>

<style lang='scss' scoped>
.box-card {
  margin: 10px;
}
.goPage {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}
</style>